import { Meta, Status, Props, Story } from '../../../../.storybook/components';
import * as Stories from './SideNavigation.stories';
import * as TopNavigationStories from '../TopNavigation/TopNavigation.stories';

<Meta of={Stories} />

# SideNavigation

<Status variant="stable" />

The side navigation is part of the [application shell](https://developers.google.com/web/fundamentals/architecture/app-shell). It contains the primary and secondary navigation links.

<Props />

## Usage with the top navigation

<Story of={TopNavigationStories.WithSideNavigation} inline={false} />

The side navigation is meant to be used alongside the [TopNavigation](Navigation/TopNavigation) component, which displays a hamburger button on narrow viewports to toggle the side navigation.

## Accessibility

To improve the navigation experience, this component includes a skip navigation link that allows users to jump directly to the main content of the page. This is particularly useful for users who rely on screen readers or keyboard navigation.
To enable this behaviour, simply pass a hash link to your main content as the `skipNavigationHref` prop and a `skipNavigationLabel` as label.
More information about this can be found in the [SkipLink](Navigation/SkipLink/Docs) component documentation.
